<template>
	<view class="box">
		<uv-transition :show="true" duration='1000' timing-function='ease-out' :mode="['fade','zoom-in']">
			<view :style="{height:`calc(12rpx + ${menuButtonInfo.bottom}px)`}"
				style="display: flex;align-items: flex-end;background: #fff;padding-bottom: 12rpx;">
				<view style="display: flex;align-items: center;justify-content: space-between;padding:0 24rpx;"
					:style="{height:`${menuButtonInfo.height}px`}">
					<view style="color: #000;font-weight: bold;">进度</view>
					<view style="color: rgb(255,82,53);font-weight: bold;">100%</view>
				</view>
			</view>
		</uv-transition>
		<uv-transition :show="true" duration='1000' timing-function='ease-out' :mode="['fade','zoom-in']">
			<swiper :indicator-dots="true" :duration="300"
				:style="{height:`calc(100vh - calc(12rpx + ${menuButtonInfo.bottom}px) - 24rpx)`}">
				<swiper-item v-for="(v,i) of list" :key="v.name">
					<view class="swiper-item">
						<template v-if="!v.pass">
							<uv-transition :show="v.itpassword != v.password" duration='1000'
								@change="(e)=>{!e.detail?v.pass=1:''}">
								<view
									style="white-space:pre-wrap;font-weight: bold;font-size: 55rpx;text-align: center;margin-top: 15vh;">
									{{v.name}}
								</view>
							</uv-transition>
							<view style="position: absolute;width: 100%;bottom: 10vh;left: 0;padding: 24rpx;"
								v-if="v.itpassword != v.password">
								<view
									style="background: rgba(255, 255, 255, 0.1);border-radius: 18rpx;padding:0 24rpx;">
									<input type="text" v-model="v.itpassword" style="height: 100rpx;text-align: center;"
										@input="inputPassword(v,i)" placeholder-style="color:#f1f2f3"
										placeholder="请输入通关文书" />
								</view>
							</view>
						</template>
						<template v-if="v.pass>=1">
							<uv-transition :show="true" duration='1000' timing-function='ease-out'
								:mode="['fade','slide-right']" @change="(e)=>{e.detail?showBox=true:''}">
								<view
									style="font-size: 55rpx;font-weight: bold;white-space:pre-wrap;margin-bottom: 48rpx;">
									{{v.text}}
								</view>
							</uv-transition>
							<uv-transition :show="v.pass==2" duration='1000' timing-function='ease-out'
								:mode="['fade','slide-right']">
								<view style="color: #fff;white-space:pre-wrap;margin-bottom: 48rpx;"
									v-for="l in v.value">
									{{l}}
								</view>
							</uv-transition>
							<view
								style="position: fixed;bottom: 0;left: 24rpx;width: calc(100% - 48rpx);background: linear-gradient(to top,#ff6310,#ff631000);height: 100rpx;border-radius: 18rpx;">
							</view>
						</template>
					</view>
				</swiper-item>
			</swiper>
		</uv-transition>
		<uv-transition :show="showBox" duration='1000' timing-function='ease-out' :mode="['fade','slide-top']">
			<view v-if="showBox" @click="next"
				style="position: fixed;bottom: 0;left: 0;width: 100%;padding: 48rpx;z-index: 999;background: linear-gradient(to top,rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0));padding-bottom: 96rpx;">
				<view
					style="background: #fff;border-radius: #fff;padding: 24rpx;border-radius: 18rpx;padding-left: 100rpx;min-height: 130rpx;padding-bottom: 48rpx;border: 2rpx solid rgb(58, 14, 20);">
					<view style="color: #000;white-space:pre-wrap;font-weight: bold;">
						{{showText}}
					</view>
					<view style="position: absolute;left: 24rpx;top: 50rpx;">
						<image style="width: 100rpx;height: 100rpx;" src="../../static/icon_love.png" mode="aspectFit">
						</image>
					</view>
				</view>

			</view>
		</uv-transition>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// #ifndef MP
				menuButtonInfo: {
					bottom: 40,
					height: 40
				},
				// #endif
				// #ifdef MP
				menuButtonInfo: uni.getMenuButtonBoundingClientRect(),
				// #endif
				list: [{
					name: '初次见面，\n  请多关照',
					password: '太阳可以是蓝色吗',
					pass: null,
					text: '她',
					itpassword: '',
					value: ['她是叫闪闪么？',
						'黑长直的头发，\n声音也好听呢',
						'啊？\n她也喜欢《从你的全世界路过》么，\n好巧，也是我喜欢的',
						"是个小哭包呢，\n还喜欢写字条，\n柔柔弱弱，可可爱爱的",
						'"好久没有遇到\n那么高质量的情感本玩家了"，\n她加我微信了！！！',
						'"可能她讲话冲" \n"不敢大声说话" \n"有点社会"，\n我看她被人调侃，我有些想袒护她',
						'"吃夜宵嘛" "好啊" \n"我到家啦，你路上注意安全" \n"我是有礼貌的小女孩"',
						"她 有些特别"
					]
				}, {
					name: '你怕狗，\n所以我们以后养只猫',
					password: '白马',
					pass: null,
					text: '我表白了',
					itpassword: '',
					value: [
						'我来接你吧\n不要你太远了，\n我们在白马见吧',
						"呜呜呜 \n我怕狗 \n我胆子很小的 \n现在我回复你 \n没事了，以后我在",
						"......\n你怕狗\n所以我们以后养只猫\n我即兴改了剧本\n因为我记住了你怕狗呀",
						"我表白了\n虽然是剧本\n但是内一刻的情感 是真的！",
						"是的\n一眼万年 从第一次见你\n我真是个轻浮的巨蟹",
						"我想....\n算了\n我没有勇气\n没那么游刃有余",
					]
				}, {
					name: '我想EMO一会',
					password: '1122',
					pass: null,
					text: '顺水推舟',
					itpassword: '',
					value: [
						'你去调调料没等我!\n这是我后来才知道的事情\n我只记得我们内天聊的很开心',
						'我们开始聊本\n聊本以外的\n聊到了曾经',
						'对了\n我给你系鞋带有没有很加分',
						'EMO了\n我想去江边\n我前男友带我去的\n????????',
						'我们看电视\n我们唱歌\n后来 我顺水推舟\n大胆了一些\n靠近你\n搂住你',
						"我和你脸贴的更近了些\n我感受到你\n呼吸急促\n眼神迷离\n于是......",
						'今宵剩把银灯照\n犹恐相逢是梦中'
					]
				}, {
					name: '我教你，\n要这样搂女孩子',
					password: '瞬',
					pass: null,
					text: '说过要一起看的海',
					itpassword: '',
					value: [
						'《说过要一起看的海》\n你向我推荐了这首歌\n所以我记住到了现在\n所以我常和你提起\n我们要去 看海',
						'你拉起我的手，环绕住你\n要这样搂女孩子\n懂了吗\n不是 谁懂啊(一语双关)!!!',
						'我们几乎天天见面\n我开始逐渐热情\n开始关注你的星座\n开始学习怎么恋爱',
						'所以\n是过程重要还是结果重要\n我又回想起来这句话',
						'都重要!!!!!\n我都要给你!!!!!',
						'(你是这天在我提醒下才把我加入朋友圈可见分组的，怎么个事？)',
						'今天  \n2023年11月23 \n晚上9.25\n是我第一次对你说\n我喜欢你'
					]
				}, {
					name: '一人变俩人\n独行变同行',
					password: '酒',
					pass: null,
					text: '真正心动的开始',
					itpassword: '',
					value: [
						'你站在我面前\n想要拉起我\n不要\n我不想起来，我喜欢这个瞬间',
						'我喜欢你向我伸手\n我喜欢你搀扶我瞬间的上头意志\n这是我真正心动的开始',
						'此刻我们爱意和浪漫已到极致\n我们彼此互相靠近\n讲述各自的伤疤\n互相抚慰',
						'我好像开始要了解到你\n我能感觉到你愿意接纳我了',
						'我爱你\n无论理性还是感性\n我都要这般说'
					]
				}],
				showBox: false,
				showText: '',
				showTextAll: '',
				showList: [],
				showIndex: null,
				showListIndex: null,
				showover: false
			}
		},
		onShow() {
			if (innerAudioContext) {
				try {
					innerAudioContext.pause();
					innerAudioContext.destroy()
					innerAudioContext = null
				} catch (e) {
					//TODO handle the exception
				}
			}
			const innerAudioContext = uni.createInnerAudioContext();
			innerAudioContext.autoplay = true;
			innerAudioContext.loop = true
			innerAudioContext.src = 'https://yikaoplan.oss-cn-beijing.aliyuncs.com/music.mp3';
			innerAudioContext.onPlay(() => {
				console.log('开始播放');
			});
		},
		watch: {
			showIndex() {
				this.showText = ''
				this.showTextAll = this.showList[this.showIndex]
			},
			showTextAll(v) {
				this.showover = false
				let d = 100
				let this_ = this
				let f = () => {
					if (this_.showTextAll == this_.showText) {
						this_.showover = true
						return
					}
					this_.showText = this_.showTextAll.slice(0, this_.showText.length + 1)
					setTimeout(f, d)
				}
				f()
			}
		},
		methods: {
			inputPassword(v, i) {
				if (v.itpassword == v.password) {
					uni.hideKeyboard()
					setTimeout(() => {
						this.showListIndex = i
						this.showList = v.value
						this.showIndex = 0
					}, 2000)
				}
			},
			next() {
				if (!this.showover || !this.showBox) return;
				if (this.showIndex >= this.showList.length - 1) {
					this.showBox = false
					this.list[this.showListIndex].pass = 2
					this.showTextAll = ''
					this.showText = ''
					return;
				}
				this.showIndex++
			}
		}
	}
</script>

<style lang="scss">
	.box {
		background: #fff;
		min-height: 100vh;
	}

	.swiper-item {
		width: calc(100vw - 48rpx);
		margin-left: 24rpx;
		background: rgb(255, 99, 16);
		height: 100%;
		border-radius: 24rpx;
		padding: 24rpx;
		color: #fff;
		position: relative;
		overflow: auto;
	}
</style>